<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('商城-商品搜索','search')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!--分类筛选-->
<div class="classify">
    <div class="category">
        <div class="category_bar">
                <th:block th:if="${keywords!=null}">
                    <div class="findword">搜索 "<th:block th:text="${keywords}"></th:block>"</div>
                </th:block>
        </div>
    </div>
</div>

<!--排序-->
<div class="sort">
    <div class="list">
        <a href="javascript:setSort('', 'desc');">
            <div th:class="${orderBy==null || orderBy=='default' || orderBy=='' ? 'active' : ''}">推荐</div>
        </a>
        <a href="javascript:setSort('goodsId', 'desc');">
            <div th:class="${orderBy=='goodsId'?'active':''}">新品</div>
        </a>
        <a href="javascript:setSort('sellingPrice', 'asc');">
            <div th:class="${orderBy=='sellingPrice'?'active':''}">价格</div>
        </a>
    </div>
</div>

<div class="goods_item center" id="goods_search_list">

</div>
<input type="hidden" id="keywords" th:value="${keywords}" />
<div th:replace="mall/footer::footer-fragment"></div>
<!-- jQuery -->
<script th:src="@{/mall/plugins/jquery/jquery.min.js}"></script>
<script>
    //搜索参数
    var param = {
        keywords: $("#keywords").val(),
        page: 1,
        size: 10,
        sortBy: "",
        order: "",
        minPrice: 1,
        maxPrice: 100000
    };
    function setSort(sortBy, order) {
        param.sortBy = sortBy;
        if (param.sortBy == sortBy) {
            if (param.order == 'asc') {
                param.order = 'desc';
            } else {
                param.order = 'asc';
            }
        } else {
            param.order = order;
        }

        searchGoods();
    }

    function setPage(page) {
        param.page = page;
        searchGoods();
    }

    function searchGoods() {
        $.ajax({
            url: '/goods/searchResult',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(param),
            // data: param,
            // datatype: 'json',
            success: function (res) {
                if (res.code == 200) {
                    var goods_data = res.data;
                    var total_count = goods_data.totalCount;
                    console.log("结果总数："+total_count);
                    var page_num = Math.ceil(total_count / 10);
                    var goods_list = goods_data.list;
                    console.log("goods_list.length："+goods_list.length);

                    $('#goods_search_list').html('');
                    var goods_search_list_content = '';
                    if (goods_list.length <= 0) {
                        goods_search_list_content = '<div class="main center"><img style="margin-top: 16px;padding: 16px 20px;" src="/mall/image/null-content.png" /><div class="clear"></div></div>';
                    } else {
                        goods_search_list_content += '<div class="main center">';
                        for (var i = 0; i < goods_list.length; i++) {
                            var goods = goods_list[i];
                            goods_search_list_content += '<div class="item_card_frame">' +
                                '                           <div class="item_card">' +
                                '                               <a href="/goods/'+goods.goodsId+'" target="_blank"><img src="'+goods.goodsCoverImg+'" alt="'+goods.goodsName+'" onerror="this.src=\'/images/goods/202211/20221130_20130121.jpg\'" /></a>' +
                                // '                               <a href="/goods/'+goods.goodsId+'" target="_blank"><img src="/images/goods/202211/20221130_20130121.jpg" alt="'+goods.goodsName+'" /></a>' +
                                '                           </div>' +
                                '                           <div class="item_brand">' +
                                '                               <a href="/goods/'+goods.goodsId+'" target="_blank" >'+goods.goodsName+'</a>' +
                                '                           </div>' +
                                '                           <div class="item_sub_intro" >'+goods.goodsIntro+'</div>' +
                                '                           <div class="item_price">'+goods.sellingPrice+'.00元</div>' +
                                '                        </div>';
                        }
                        goods_search_list_content += '<div class="clear"></div></div>';

                        //翻页
                        if (page_num > 1) {
                            goods_search_list_content += '<div class="pages"><div class="page_wrap"><span class="page_span1">';
                            if (param.page > 1) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page - 1)+');">< 上一页</a>';
                            }
                            if (param.page - 2 >= 1) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page - 2)+');">'+(param.page - 2)+'</a>';
                            }
                            if (param.page - 1 >= 1) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page - 1)+');">'+(param.page - 1)+'</a>';
                            }
                            goods_search_list_content += '<a href="##" class="active">'+param.page+'</a>';
                            if (param.page + 1 <= page_num) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page + 1)+');">'+(param.page + 1)+'</a>';
                            }
                            if (param.page + 2 <= page_num) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page + 2)+');">'+(param.page + 2)+'</a>';
                            }
                            if (param.page < page_num) {
                                goods_search_list_content += '<a href="javascript:setPage('+(param.page + 1)+');">下一页 ></a>';
                            }

                            goods_search_list_content += '</span></div></div>';
                        }
                    }
                    $('#goods_search_list').html(goods_search_list_content);
                } else {
                    console.log("error: " + res.code + " - " + res.message);

                    return;
                }
            }
        });
    }

    searchGoods();
</script>
</body>
</html>